<template>
  <div class="page-wrap">
    <div style="color: rgb(27, 76, 184); margin-bottom: 15px">
      <div class="addressIcon"></div>
      <span>当前位置：</span>
      <span style="cursor: pointer" @click="returnCompany">{{ pageTitle }}</span>
      <Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
      <span style="color: #333">{{ this.$route.query.sceneName }}</span>
      <Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
      <span style="color: #333">选手行为监控</span>
    </div>
    <div
      class="page-content"
      :style="{
        height: contentHei === 'auto' ? contentHei : `${contentHei}px`,
      }"
    >
      <div class="img-header">
        <div style="font-weight: 700; font-size: 18px">选手行为监控</div>
      </div>
      <div class="content-wrap">
        <Tabs
          class="demo-tabs-style2"
          @on-click="changeMonitorTab"
          :value="monitorDefault"
        >
          <TabPane label="网络行为" name="networkBehavior">
            <networkBehavior
              v-if="monitorDefault == 'networkBehavior'"
              :showMonitoring="showMonitoring"
              @toTrafficRetrieval="toTrafficRetrieval"
            />
          </TabPane>
          <TabPane label="威胁事件" name="threatEvent" v-if="false">
            <threatEvent v-if="monitorDefault == 'threatEvent'" />
          </TabPane>
          <TabPane label="流量检索" name="trafficRetrieval" v-if="false">
            <trafficRetrieval v-if="monitorDefault == 'trafficRetrieval'"  :trafficRetrievalParams="trafficRetrievalParams"/>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </div>
</template>
<script>
import PackageProgress from '@/components/package-progress/package-progress.vue';
import { mapState } from 'vuex';
import networkBehavior from '@/view/drill_compete/page/componentHW/networkBehavior'
import threatEvent from '@/view/drill_compete/page/componentHW/threatEvent'
import trafficRetrieval from '@/view/drill_compete/page/componentHW/trafficRetrieval'
import groupMixin from '@/mixin/groupMixin';
export default {
  name: 'monitoring',
  mixins: [groupMixin],
  components: { PackageProgress,networkBehavior,threatEvent,trafficRetrieval }, //screenRecord
  data() {

    return {
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      contentHei: 'auto',
      monitorDefault: 'networkBehavior',
      // 裁判禁用行为监控
      showMonitoring: false,
      trafficRetrievalParams: {
        //  网络行为切换到流量检索参数
        showFlag: false,
      },
    }
  },
  computed: {
    ...mapState('board', ['newNotice']),
    pageTitle () {
      //当前菜单显示名
      return this.$store.getters.pageTitle;
    },
  },
  watch: {},
  created() {},
  async mounted () {
    await this.getTeamList();
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
  },
  methods: {
     // 网络行为切换到流量检索
    toTrafficRetrieval (row) {
      this.trafficRetrievalParams = row;
      this.changeMonitorTab('trafficRetrieval');
    },
    changeMonitorTab (val) {
      this.monitorDefault = val
    },
    // 设置高度
    setStyle() {
      clearTimeout(this.refreshTimer);
      this.refreshTimer = setTimeout(() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        this.fullHeight = window.fullHeight;
        this.fullWidth = window.fullWidth;
        this.contentHei = this.fullHeight - 36 - 50; // 80是头部高度  60是上下padding
        this.pageSize = Math.floor((this.contentHei - 167) / 96) || 1;
        // this.getReportList();
      }, 200);
    },
    // 返回icon管理
    returnCompany() {
      this.$router.push({
        path: '/referee'
      });
    },
  }
};
</script>
<style scoped>
.page-wrap {
  padding: 25px;
}
.page-wrap-query /deep/ .ivu-cascader-rel .ivu-input {
  border-radius: 20px;
}
.reset-color /deep/ .ivu-select-selected-value {
  color: unset !important;
}
.page-content {
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.img-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0 20px;
}
.addressIcon {
  display: inline-block;
  height: 14px;
  width: 12px;
  background: url("../../assets/globalIcon/addressIcon.png") no-repeat center;
  background-size: 100% 100%;
  margin-bottom: -1px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.content-wrap {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 20px;
  flex: 1;
  height: 0;
}
.content-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.content-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.content-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
</style>
